<!-- NewTrainHomePage_Win.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>培训tab页</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<style>
			body {
				background-color: #fff;
			}
			#footer {
				background-color: #fff;
				height: 52px;
				overflow: hidden;
			}
			#footer ul li {
				padding-top: 32px;
				padding-bottom: 4px;
				background: url() no-repeat center 4px;
				background-size: auto 24px;
				text-align: center;
				color: #979797;
				font-size: 12px;
			}
			#footer ul li.active {
				color: #18b4ed;
			}
			#footer ul li:nth-child(1) {
				background-image: url(../../image/logo.png);
			}
			#footer ul li:nth-child(2) {
				background-image: url(../../image/icon_fx.png);
			}
			#footer ul li:nth-child(3) {
				background-image: url(../../image/icon_px.png);
			}
			#footer ul li:nth-child(4) {
				background-image: url(../../image/icon_dd.png);
			}
			#footer ul li:nth-child(5) {
				background-image: url(../../image/icon_xx.png);
			}
			#footer ul li:nth-child(1).active {
				background-image: url(../../image/logo.png);
			}
			#footer ul li:nth-child(2).active {
				background-image: url(../../image/icon_fx2.png);
			}
			#footer ul li:nth-child(3).active {
				background-image: url(../../image/icon_px2.png);
			}
			#footer ul li:nth-child(4).active {
				background-image: url(../../image/icon_dd2.png);
			}
			#footer ul li:nth-child(5).active {
				background-image: url(../../image/icon_xx2.png);
			}
		</style>
	</head>
	<body>
		<div id="wrap" class="flex-wrap flex-vertical">
			<div id="main" class="flex-con"></div>
			<div id="footer" class="border-t">
				<ul class="flex-wrap" >
					<li tapmode="hover" onclick="toHomePage();" class="flex-con" >
						长风网
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn(0);" class="flex-con active" >
						发现
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn(1);" class="flex-con" >
						培训
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn(2);" class="flex-con" >
						订单
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn(3);" class="flex-con" >
						学习
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		apiready = function(){
		    setupGroup();
		}
		function setupGroup(){
			var frames = new Array();
			//发现
			frames.push({
				name : 'found',
				url : 'found.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false
			});
			//培训
			frames.push({
				name : 'NewTrain_win',
				url : 'NewTrain_win.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false
			});
			//订单
			frames.push({
				name : 'NewTrainOrder_win',
				url : 'NewTrainOrder_win.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false
			});
			//学习
			frames.push({
				name : 'NewTrainStudy_win',
				url : 'NewTrainStudy_win.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false
			});
			var bottomH = $api.byId('footer').offsetHeight;
			//52
			var y = 0;
			var h = api.winHeight - bottomH;
			api.openFrameGroup({
				name : 'newTrainFrameGroup',
				background : '#fff',
				scrollEnabled : false,
				rect : {
					x : 0,
					y : y,
					w : 'auto',
					h : h
				},
				index : 0,
				frames : frames,
				preload : 3
			}, function(ret, err) {
				var index = ret.index;
				setupSwitchBtn(index);
			});
		} 
		// 随意切换按钮
		function randomSwitchBtn(index) {
			setupSwitchBtn(index);
			api.setFrameGroupIndex({
				name : 'newTrainFrameGroup',
				index : index
			});
			if (index == 1) {
				api.setFrameGroupAttr({
				    name: 'NewTrain_winFrameGroup',
				    hidden: false
				});
			}else{
				api.setFrameGroupAttr({
				    name: 'NewTrain_winFrameGroup',
				    hidden: true
				});
			}
			if (index == 2){
				api.setFrameGroupAttr({
				    name: 'NewTrainOrderFrameGroup',
				    hidden: false
				});
			}else{
				api.setFrameGroupAttr({
				    name: 'NewTrainOrderFrameGroup',
				    hidden: true
				});
			}
			if(index == 3){
				api.setFrameGroupAttr({
				    name: 'NewTrainStudyFrameGroup',
				    hidden: false
				});
			}else{
				api.setFrameGroupAttr({
				    name: 'NewTrainStudyFrameGroup',
				    hidden: true
				});
			}
		}
		function setupSwitchBtn(index){
			//设置tabbar选中下标
			var eFootLis = $api.domAll('#footer li');
			for (var i = 0, len = eFootLis.length; i < len; i++) {
				$api.removeCls(eFootLis[i], 'active');
			}
			$api.addCls(eFootLis[index+1], 'active');
		}
		function toHomePage(){
			api.closeWin();
		}
	</script>
</html>